<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript学习指南</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      color: #333;
    }
    h1 {
      color: #2c3e50;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
      text-align: center;
    }
    .intro {
      background-color: #f8f9fa;
      border-left: 4px solid #42b983;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 0 4px 4px 0;
    }
    .section {
      margin-bottom: 30px;
    }
    .section h2 {
      color: #42b983;
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
    }
    .card {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 15px;
      margin-bottom: 15px;
      transition: all 0.3s ease;
    }
    .card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    .card h3 {
      margin-top: 0;
      color: #2c3e50;
    }
    .card p {
      margin-bottom: 10px;
    }
    .card a {
      display: inline-block;
      background-color: #42b983;
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }
    .card a:hover {
      background-color: #3aa876;
    }
    .docs {
      margin-top: 10px;
    }
    .docs a {
      display: inline-block;
      background-color: #f1f1f1;
      color: #333;
      padding: 5px 10px;
      border-radius: 4px;
      text-decoration: none;
      margin-right: 5px;
      margin-bottom: 5px;
      transition: background-color 0.3s ease;
    }
    .docs a:hover {
      background-color: #e0e0e0;
    }
    footer {
      text-align: center;
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid #eee;
      color: #777;
    }
  </style>
</head>
<body>
  <h1>JavaScript学习指南</h1>
  
  <div class="intro">
    <p>欢迎使用JavaScript学习指南！本指南涵盖了JavaScript的核心概念、DOM操作、事件处理、异步编程、ES6+特性和设计模式等内容。通过交互式示例和详细文档，帮助你快速掌握JavaScript编程。</p>
    <p>无论你是初学者还是有经验的开发者，都可以在这里找到有用的资源和示例。</p>
  </div>
  
  <div class="section">
    <h2>学习文档</h2>
    <div class="docs">
      <a href="JavaScript学习指南.md" target="_blank">JavaScript基础</a>
      <a href="JavaScript学习指南-续.md" target="_blank">DOM和异步编程</a>
      <a href="JavaScript学习指南-完结篇.md" target="_blank">ES6+和设计模式</a>
      <a href="README.md" target="_blank">学习指南</a>
    </div>
  </div>
  
  <div class="section">
    <h2>交互式示例</h2>
    
    <div class="card">
      <h3>JavaScript基础语法</h3>
      <p>学习JavaScript的基本语法、变量、数据类型、运算符、条件语句、循环和函数等核心概念。</p>
      <a href="js-basic-syntax.html" target="_blank">查看示例</a>
    </div>
    
    <div class="card">
      <h3>DOM操作和事件处理</h3>
      <p>学习如何使用JavaScript操作DOM元素、处理事件、修改样式和内容，以及表单验证等。</p>
      <a href="js-dom-events.html" target="_blank">查看示例</a>
    </div>
    
    <div class="card">
      <h3>异步JavaScript和ES6+特性</h3>
      <p>学习Promise、Async/Await、Fetch API以及ES6+的类、解构赋值、展开运算符等现代JavaScript特性。</p>
      <a href="js-async-es6.html" target="_blank">查看示例</a>
    </div>
    
    <div class="card">
      <h3>JavaScript设计模式</h3>
      <p>学习常见的JavaScript设计模式，包括单例模式、工厂模式、观察者模式、模块模式等。</p>
      <a href="js-design-patterns.html" target="_blank">查看示例</a>
    </div>
    
    <div class="card">
      <h3>待办事项应用</h3>
      <p>一个完整的待办事项应用示例，综合运用JavaScript的各种概念和设计模式。</p>
      <a href="js-todo-app.html" target="_blank">查看示例</a>
    </div>
  </div>
  
  <footer>
    <p>JavaScript学习指南 &copy; 2023 | 使用现代JavaScript技术构建</p>
  </footer>
</body>
</html>